<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Textarea with Scrollbar 多行显示支持滚动条</title>
    <style>
      /* CSS 代码开始 */
      #outputBox {
        max-height: 10em; /* 假设一行的高度为 1em，设置最大高度为 10 行 */
        overflow-y: auto; /* 启用垂直滚动条 */
        width: 80%; /* 设置宽度 */
      }
      /* CSS 代码结束 */
    </style>
  </head>
  <body>
    <div>
      <textarea id="outputBox" rows="10"></textarea>
    </div>
    <script>
      // JavaScript 代码开始
      // 获取输出框元素
      var outputBox = document.getElementById("outputBox");
      // 向输出框添加内容的函数
      function addContent(content) {
        outputBox.value += content + "\n";
      }
      // 清空输出框内容的函数
      function clearContent() {
        outputBox.value = "";
      }
      // 示例使用
      addContent("这是第一行内容11111111111111111111111");
      addContent("这是第二行内容2222222222222222222");
      // JavaScript 代码结束
    </script>
  </body>
</html>
